<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>姓名案例-计算属性实现</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            计算属性：
                1.定义：要用的属性不存在，要通过“已有的属性”计算得来；（比如vm中data所定义的属性是已有的，而不是vm管理之外的变量）；
                2.原理：底层借助了Object.defineProperty方法提供getter和setter。
                3.get函数什么时候被执行调用？
                    （1）初次读取会被调用一次；
                    （2）当依赖的数据发生改变时会被再次调用；
                4.优势：与methods相比，内部有缓存机制（复用），效率更高，调试方便。
                5.备注：
                    1、计算属性最终会出现在vm上，直接读取即可；
                    2、如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算属性所依赖的数据发生改变；
        -->
        <!-- 准备一个容器 -->
        <div id="root">
            姓：<input type="text" v-model="firstName"> <br/>
            名：<input type="text" v-model="lastName"> <br/>
            全名：<span>{{fullName}}</span>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
            
            const vm = new Vue({
                el:"#root",
                data:{
                    firstName:'张',
                    lastName:'三'
                },
                computed:{
                    fullName:{
                        //getter有什么作用？当有人初次调用fullName时，get就会被调用，且返回值作为fullName的值
                        /*
                            getter什么时候被调用？
                                1.初次读取fullName时，只要值不发生改变就不会再调用；
                                2.所依赖的数据发生改变时（例如firstName或lastName属性的值发生了变化）
                        */
                        get(){
                            console.log('getter被调用了');
                            return this.firstName + '—' + this.lastName; //当前this所指向的是vm对象
                        },
                        //如果计算属性只是提供给用户进行读，那么setter函数就不必定义。
                        //setter什么时候被调用？当fullName被修改时
                        set(value){
                            console.log('setter被调用了',value);
                            const arr = value.split('—'); //按照指定字符将字符串拆分成一个数组
                            //如果计算属性要被修改，那必须写set函数去响应，并且要引起计算属性所依赖的数据发生改变
                            this.firstName = arr[0];
                            this.lastName = arr[1];
                        }
                    }
                }
            })
        </script>
        
    </body>
</html>